import { reactive, onMounted, defineComponent } from "vue";
import { useLoginState, LoginStateEnum } from "../utils/useLogin";
import LoginTitle from "./login-title";
import "../login.scss";

/** 登录表单 */
const updateForm = defineComponent({
  setup() {
    const { setLoginState } = useLoginState();

    /** 用户登录参数 */
    const loginParams = reactive({
      userName: "",
      passWord: "",
      newPassWord: "",
      checked: false,
    });

    /** 表单提交 */
    const submit = () => {
      console.log(loginParams.userName);
    };

    /** 渲染函数 */
    return () => (
      <div>
        {LoginTitle("找回密码")}
        <el-form class="login-form">
          <el-form-item>
            <el-input
              class="login-input"
              v-model={loginParams.userName}
              placeholder="请输入用户名"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item>
            <el-input
              class="login-input"
              v-model={loginParams.passWord}
              placeholder="请输入旧密码"
              show-password
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item>
            <el-input
              class="login-input"
              v-model={loginParams.newPassWord}
              placeholder="请输入新密码"
              show-password
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              class="login-btn"
              size="large"
              type="primary"
              onClick={submit}
            >
              确定
            </el-button>
            <el-button
              class="login-btn"
              size="large"
              plain
              onClick={() => setLoginState(LoginStateEnum.REGISTER)}
            >
              去注册
            </el-button>
            <el-button
              class="back-btn"
              size="large"
              plain
              onClick={() => setLoginState(LoginStateEnum.LOGIN)}
            >
              返回登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    );
  },
});

export default updateForm;
